import { useEffect, useRef, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
export default function NotFound() {
  const history = useHistory()
  const [time, setTime] = useState(3)
  const timer = useRef(0)
  useEffect(() => {
    timer.current = window.setInterval(() => {
      setTime((time) => time - 1)
    }, 1000)
    return () => {
      clearInterval(timer.current)
    }
  }, [])

  useEffect(() => {
    if (time === 0) {
      clearInterval(timer.current)
      // 跳转到首页
      history.push('/home')
    }
  }, [time, history])
  return (
    <div>
      你访问的页面不存在，{time}秒后跳转到<Link to="/home">首页</Link>
    </div>
  )
}
